<template>
    <div class="portlet box blue">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-gift"></i>通行证查询</div>
            <div class="tools">
                <a href="javascript:;" class="collapse" data-original-title="" title=""></a>
            </div>
        </div>
        <div class="portlet-body form">
            <!-- BEGIN FORM-->
            <form action="#" class="form-horizontal">
                <div class="form-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-md-3">通行证号</label>
                                <div class="col-md-9">
                                    <passport-select ref="passportSelect" @PassportSelectChanged="PassportSelectChanged"></passport-select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-md-3">性别</label>
                                <div class="col-md-9">
                                    <el-select v-model="condition.Sex" clearable placeholder="请选择性别查询条件" style="width:100%">
                                        <el-option v-for="item in words.sex" :key="item.value" :label="item.text" :value="item.value"></el-option>
                                    </el-select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-md-3">国家地区</label>
                                <div class="col-md-9">
                                    <el-select v-model="condition.Country" clearable placeholder="请选择国家查询条件" style="width:50%" @change="countryChanged" @clear="countryClear">
                                        <el-option v-for="item in words.locations" :key="item.Code" :label="item['Name-zh-CN']" :value="item.Code"></el-option>
                                    </el-select>
                                    <el-select v-model="condition.Province" clearable placeholder="请选择省份查询条件" style="width:49%">
                                        <el-option v-for="item in words.provinces" :key="item.Code" :label="item['Name-zh-CN']" :value="item.Code"></el-option>
                                    </el-select>                                    
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-md-3">创建日期</label>
                                <div class="col-md-9">
                                    <el-date-picker v-model="createTimeRange" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions" style="width:100%"></el-date-picker>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-md-3">通行证状态</label>
                                <div class="col-md-9">
                                    <el-select v-model="condition.States" multiple placeholder="请选择通行证状态" style="width:100%">
                                        <el-option v-for="item in words.states" :key="item.value" :label="item.text" :value="item.value"></el-option>
                                    </el-select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-md-3">通行证类型</label>
                                <div class="col-md-9">
                                    <el-select v-model="condition.PassportTypes" multiple placeholder="请选择通行证类型" style="width:100%">
                                        <el-option v-for="item in words.types" :key="item.value" :label="item.text" :value="item.value"></el-option>
                                    </el-select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-md-3">组织名称</label>
                                <div class="col-md-9">
                                    <el-input placeholder="请输入您想查询的组织或学校名称" v-model="condition.Orgnization" clearable></el-input>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-md-3"></label>
                                <div class="col-md-9">
                                </div>
                            </div>
                        </div>
                    </div>                    
                </div>
                <div class="form-actions">
                    <div class="row">
                        <div class="col-md-12 pull-right">
                            <div style="float:right;">
                                <button type="button" class="btn green" @click="exportPrint()">导出通行证打印稿</button>
                                <button type="button" class="btn green" @click="exportPassports()">导出通行证列表</button>
                                <button type="button" class="btn green" @click="query()">查询通行证</button>
                                <button type="button" class="btn default" @click="clear()">清空条件</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <!-- END FORM-->
        </div>
    </div>
</template>

<script>


import {GetPickerShortcuts} from 'web/utils.js';
import Locations from 'assets/locations.js';
import PassportSelect from 'components/passport_select.vue';

export default {
    props: {
        'data': {
            type: Object,
            default: null
        },
    },
    components: {
        PassportSelect
    },
    data() {
        return {
            condition: {
                States: [0, 1]
            },
            createTimeRange: null,
            birthDateRange: null,
            words: {
                sex: [
                    {value: 'MALE',text: '男'},
                    {value: 'FEMALE',text: '女'}
                ],
                locations: Locations,
                provinces: [],
                states: [
                    { text: '未激活', value:  0 },
                    { text: '已激活', value:  1 },
                    { text: '已删除', value: -1 }                 
                ],
                types: [
                    { text: '观摩证', value:  0 },
                    { text: '参赛证', value:  1 }             
                ]
            },
            pickerOptions: GetPickerShortcuts(),
        }
    },
    watch: {
        'data': {
            handler: function(value){
                this.condition = value;
            },
            deep: true
        },
    },
    mounted() {
        this.query();
    },
    methods: {
        query() {
            // 将时间范围分解到condition中
            let _condition = Object.assign({}, this.condition);
            if (this.createTimeRange) {
                _condition.CreateTime0 = this.createTimeRange[0];
                _condition.CreateTime1 = this.createTimeRange[1];
            }
            if (this.birthDateRange) {
                _condition.Birth0 = this.birthDateRange[0];
                _condition.Birth1 = this.birthDateRange[1];
            }
            this.$emit('getPassportCondition', _condition);
        }, 

        PassportSelectChanged(userIds) {
            this.condition.UserIds = userIds;
        },

        clear() {
            this.condition = {
                PassportNo: null,
                UserName: null,
                Name: null,
                Sex: null,
                Country: null,
                Province: null,
            };
            this.createTimeRange = null;  
            this.birthDateRange = null; 
            this.$refs.passportSelect.clear();       
        },

        // Country Select选择变化
        countryChanged(selected) {
            let country = Locations.find(item => item.Code == selected);
            if (country) {
                this.words.provinces = country.State;
            }
        },

        // Country 清除
        countryClear() {
            this.words.provinces = [];
            this.condition.Province = null;            
        },

        exportPrint() {
            this.query();            
            this.$PassportService.ExportPrint(this.condition);
        },

        exportPassports() {
            this.query();            
            this.$PassportService.ExportPassports(this.condition);
        }       
    }
}
</script>

<style>

</style>
